<h1 class="block-center text-center" translate="STATUS.BONUS"></h1>
<div ng-show="vm.currentUser.class == 0" class="alert alert-warning" role="alert" translate="GENERAL.PAGE_ACCESS_LIMIT" translate-value-class="Actor"></div>
<div ng-show="vm.currentUser.class > 0">
	<loading-indicator hide="vm.bonusShop"></loading-indicator>

	<div class="col-lg-10 col-lg-push-1" ng-show="vm.bonusShop">
		<table class="table">
			<tr>
				<th style="width: 150px;" class="text-left" translate="DONATE.ACTION"></th>
				<th class="text-left" translate="GENERAL.DESCRIPTION"></th>
				<th style="width: 80px;" class="text-left" translate="GENERAL.PRICE"></th>
				<th style="width: 50px;" translate="GENERAL.PURCHASE"></th>
			</tr>
			<tr ng-repeat="item in ::vm.bonusShop">
				<td>{{ ::item.name }}</td>
				<td>{{ ::item.description }}</td>
				<td><b>{{ ::item.price }}p</b></td>
				<td><button ng-click="vm.buyItem(item)" ng-disabled="vm.currentUser.bonuspoang < item.price" class="btn btn-default btn-xs"><i class="fa fa-usd"></i> {{ 'GENERAL.PURCHASE' | translate }}</button></td>
			</tr>
		</table>
	</div>
	<div class="clearfix"></div>
	<br />

	<h2 class="block-center text-center" translate="GENERAL.BONUS_HOW_TO_EARN"></h2>
	<div class="table" style="width: 550px; margin: auto; padding: 10px;" translate="GENERAL.BONUS_INFO"></div>
	<br/>
</div>
